<template>
  <el-card class="box-card">
    <!--面包屑导航区</h3>-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form ref="form" :model="userInfo" label-width="80px">
      <el-form-item label="用户名" class="editInput">
        <el-input v-model="userInfo.username" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="userInfo.gender" placeholder="请选择性别" :disabled="flag">
          <el-option
              v-for="gender in genderOption"
              :key="gender.value"
              :label="gender.label"
              :value="gender.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" class="editInput">
        <el-input v-model="userInfo.phone" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="editFlagT" v-if="flag">编辑信息</el-button>
        <el-button type="info" @click="editFlagF" v-if="!flag">取消编辑</el-button>
        <!--        <el-button type="success" @click="editFlagF" v-if="!flag">确认修改</el-button>-->
        <el-button type="success" @click="editUserInfo" v-if="!flag">确认修改</el-button>
        <el-button type="danger" @click="toShowDialog" v-if="flag">修改密码</el-button>
        <!--        <el-button>取消</el-button>-->
      </el-form-item>
    </el-form>

    <!--    修改密码对话框-->
    <el-dialog
        :visible.sync="showDialog"
        width="50%"
        @close="showDialog = false"
    >
      <el-form ref="form" :model="editPassword" label-width="80px">
        <el-form-item label="密码" class="editInput">
          <el-input v-model="editPassword.userPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" class="editInput">
          <el-input v-model="editPassword.checkPassword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="updatePassword">确认修改</el-button>
          <el-button type="primary" @click="showDialog=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
import axios from "axios";

export default {
  name: 'EditInfo',
  methods: {
    async getUserInfo() {
      const user = JSON.parse(window.sessionStorage.getItem('user'))
      this.userInfo = {...user}
    },
    async editUserInfo() {
      const {data: res} = await axios.post('api/user/edit', this.userInfo)
      if (res.code !== 0) {
        this.$message.error(res.description || res.message)
        return
      }
      this.$message.success("修改成功")
      this.flag=true

      //会话存储重新记录用户
      const {data: response} = await axios.get('api/user/current');
      window.sessionStorage.setItem("user", JSON.stringify(response.data));
    },
    async updatePassword() {
      this.editPassword.id = JSON.parse(window.sessionStorage.getItem('user')).id
      const {data: res} = await axios.post('api/user/password', this.editPassword)
      if (res.code !== 0) {
        this.$message.error(res.description || "修改失败")
        return
      }
      this.$message.success("修改成功")
      this.showDialog = false
    },
    editFlagT() {
      this.flag = !this.flag
    },
    editFlagF() {
      this.flag = !this.flag
    },
    toShowDialog() {
      this.showDialog = true
    }
  },
  data() {
    return {
      userInfo: {
        id: '',
        username: '',
        phone: '',
        gender: '',
      },
      editPassword: {
        id: '',
        userPassword: '',
        checkPassword: '',
      },
      genderOption: [
        {
          label: '男',
          value: 0
        },
        {
          label: '女',
          value: 1
        }
      ],
      flag: true,
      showDialog: false,
    }
  },
  mounted() {
    this.getUserInfo()
  }

}
</script>

<style scoped>
.editInput {
  width: 50%;
}
</style>